{{define "/chat/createcom.shtml"}}
    <!DOCTYPE html>
    <html>
    <head>
        {{template "/chat/head.shtml"}}
        <style>
            .area {
                margin: 20px auto 0px auto;
            }

            .mui-input-group:first-child {
                margin-top: 20px;
            }

            .mui-input-group label {
                width: 24%;
            }

            .mui-input-row label ~ input,
            .mui-input-row label ~ select,
            .mui-input-row label ~ textarea {
                width: 76%;
            }

            .mui-checkbox input[type=checkbox],
            .mui-radio input[type=radio] {
                top: 6px;
            }

            .mui-content-padded {
                margin-top: 25px;
            }

            .mui-btn {
                padding: 10px;
            }

        </style>
    </head>
    <body>
    <header class="mui-bar mui-bar-nav">
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
        <h1 class="mui-title">创建群</h1>
    </header>
    <div class="mui-content" id="pageapp">
        <ul class="mui-table-view mui-table-view-chevron">
            <li class="mui-table-view-cell mui-media">
                <a class="mui-navigate-right">
                    <input style="width: 100%;height: 48px;position: absolute;opacity:0;" onchange="uploadthis(this)"
                           accept="image/png,image/jpeg" type="file" class="mui-input-clear mui-input"
                           placeholder="请输入群名称">

                    <img id="head-img" :src="com.icon" style="border-radius:50%;"
                         class="mui-media-object mui-pull-right head-img">
                    <div class="mui-media-body">
                        头像
                        <p class="mui-ellipsis">点击右侧上传头像</p></div>
                </a>
            </li>
        </ul>

        <div class="mui-input-group">


            <div class="mui-input-row">
                <label>类型</label>
                <select v-model="com.cate" class="mui-input-clear mui-input">
                    <option value="0">默认</option>
                    <option value="1">兴趣爱好</option>
                    <option value="2">行业交流</option>
                    <option value="3">生活休闲</option>
                    <option value="4">学习考试</option>
                </select>
            </div>
            <div class="mui-input-row">
                <label>名称</label>
                <input v-model="com.name" id='mobile' type="text" class="mui-input-clear mui-input"
                       placeholder="请输入群名称">
            </div>
            <div class="mui-input-row">
                <label>介绍</label>
                <textarea v-model="com.memo" id="textarea" rows="3" placeholder="群描述"></textarea>
            </div>


        </div>
        <div class="mui-content-padded">
            <button @click="createcommunity" id='reg' class="mui-btn mui-btn-block mui-btn-primary">确认</button>
        </div>

    </div>
    </body>
    </html>
    <script>
        function uploadthis(dom) {
            var data = new FormData();

            for (let file of dom.files) {
                data.append('file', file);
            }

            let xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {

                    var res = JSON.parse(xhr.responseText);
                    if (res.code != 0) {
                        mui.toast(res.msg)
                    } else {
                        app.com.icon = res.data;
                        mui.toast("上传成功")
                    }

                }
            };
            xhr.open('POST', '/attach/upload');
            xhr.send(data)
        }

        var app = new Vue(
            {
                el: "#pageapp",
                data: {
                    com: {
                        name: "",
                        cate: 0,
                        memo: "",
                        icon: "/asset/images/community.png",
                        ownerid: 0
                    },

                },
                created: function () {
                    this.com.ownerid = userId();
                },
                methods: {
                    createcommunity: function () {
                        if (!this.com.name) {
                            mui.toast("请填写名称");
                            return
                        }
                        post("contact/createcommunity", this.com, function (res) {
                            if (res.code === 0) {
                                mui.toast("创建成功");
                                window.history.back();
                            } else {
                                mui.toast(res.msg);
                            }
                        })
                    },
                }
            }
        )
    </script>
{{end}}